import React, {Component} from 'react';
import axios from "axios";

class App extends Component {
    state = {
        type: 1
    }
    render() {
        return <div>
            <ul>
                <li onClick={() => this.setState({type: 1})}>正在热映</li>
                <li onClick={() => this.setState({type: 2})}>即将上映</li>
            </ul>
            <FilmItem type={this.state.type} />
        </div>
    }
}

class FilmItem extends Component {
    state = {
        list: [],
        type: null
    }

    render() {
        return <div>
            <ul>
                {
                    this.state.list.map(item => {
                        return <li key={item.filmId}>{item.name}</li>
                    })
                }
            </ul>
        </div>
    }

    componentDidMount() {
        // 发起ajax请求
        if (this.props.type === 1) {
            axios({
                url: 'https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=2056417',
                headers: {
                    'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"17594933621256179149832193"}',
                    'X-Host': 'mall.film-ticket.film.list'
                }
            }).then(res => {
                this.setState({list: res.data.data.films});
            })
        } else if (this.props.type === 2) {
            axios({
                url: 'https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=2&k=401339',
                headers: {
                    'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"17594933621256179149832193"}',
                    'X-Host': 'mall.film-ticket.film.list'
                }
            }).then(res => {
                this.setState({list: res.data.data.films});
            })
        }
    }

    // 刷新页面会执行2次  1次是初始化(componentDidMount之前) 第二次是state改变后
    static getDerivedStateFromProps(nextProps, prevState) {
        console.log(nextProps, prevState);
        return {
            // 将父组件传过来的type保存到state中  让componentDidUpdate发起ajax请求
            type: nextProps.type
        }
    }

    // 更新state后触发
    componentDidUpdate(prevProps, prevState, snapshot) {
        // 由于内部会更新state中的list 所以会重新触发本函数 必须加上type的新旧值比较 避免无止境的重复调用
        if (this.state.type === prevState.type) {
            return
        }

        if (this.state.type === 1) {
            axios({
                url: 'https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=2056417',
                headers: {
                    'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"17594933621256179149832193"}',
                    'X-Host': 'mall.film-ticket.film.list'
                }
            }).then(res => {
                this.setState({list: res.data.data.films});
            })
        } else if (this.state.type === 2) {
            axios({
                url: 'https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=2&k=401339',
                headers: {
                    'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"17594933621256179149832193"}',
                    'X-Host': 'mall.film-ticket.film.list'
                }
            }).then(res => {
                this.setState({list: res.data.data.films});
            })
        }
    }
}

export default App;